<template>
  <div>
    <!--按供应商筛选表格-->
    <!-- <el-dialog :title="name+'表格'" :visible.sync="dialogTableVisible">
      <el-button type="primary" @click="export2excel">导出excel表</el-button>
      <el-table :data="gridData">
        <el-table-column property="id" label="id" width="40"></el-table-column>
        <el-table-column property="aks" label="aks料号" width="200"></el-table-column>
        <el-table-column property="product_num" label="制造商编号" width="200"></el-table-column>
        <el-table-column property="product_name" label="制造商"></el-table-column>
      </el-table>
    </el-dialog> -->
    <!--按供应商导出-->
    <div v-show="showExport">
      <div class="alerts"
           style="top: 20%;">
        <div class="alertDiv"
             style="width:30%;">
          <div style="text-align: center;line-height: 50px;">
            <strong class="title">按供应商导出物料</strong>
          </div>
          <div class="alertDd"
               style="width: 85%;margin: 10px auto;">
            <el-form label-width="150px"
                     label-positon="left">
              <el-form-item prop="items"
                            label="选择要导出的供应商:">
                <el-select v-model="value"
                           placeholder="请选择">
                  <el-option v-for="item in AllSlist"
                             :label="item.menuName"
                             :value="item.menuName"
                             :key="item.id"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </div>
          <div class="buttomF">
            <el-button type="primary"
                       class="textcolor"
                       @click="exportSubmit">确定</el-button>
            <el-button type="primary"
                       class="textcolor"
                       @click.native="exportCancel">取消</el-button>
          </div>
        </div>
      </div>
      <div class="alertBg"></div>
    </div>
    <el-card style="width:100%">
      <p>物料管理</p>
      <el-button type="primary"
                 style="margin:15px 0;"
                 @click="dialogProductFormVisible=true">新增物料</el-button>
      <el-button type="primary"
                 style="margin:15px 15px;"
                 @click="delInfo">批量删除</el-button>
      <el-button type="primary"
                 style="margin:15px 0px;"
                 @click="exportInfo">按供应商导出</el-button>
      <el-button type="primary"
                 style="margin:15px 15px;"
                 @click="dialogDetailFormVisible=true">导出</el-button>
      <div class="tableBox">
        <el-table ref="multipleTable"
                  :data="tableData"
                  style="width: 100%"
                  height="500"
                  stripe
                  @selection-change="handleSelectionChange">
          <!-- <el-table-column type="selection" width="50" align="center"></el-table-column> -->
          <!-- <el-table-column prop="image" label="产品图片" align="center"> -->
          <!-- <template slot-scope="scope"> -->
          <!-- <img :src="scope.row.image" min-width="70" height="70" /> -->
          <!-- </template> -->
          <!-- </el-table-column> -->
          <el-table-column type="selection"
                           width="45"
                           label="全选"></el-table-column>
          <el-table-column prop="id"
                           label="id"
                           align="center"
                           width="45"></el-table-column>
          <el-table-column prop="productCode"
                           label="AKS料号"
                           align="center"></el-table-column>
          <el-table-column prop="manufacturerCode"
                           label="制造商编号"
                           align="center"></el-table-column>
          <el-table-column prop="manufacturer"
                           label="制造商"
                           align="center"></el-table-column>
          <!-- <el-table-column prop="storeInfo " label="物料描述" align="center"></el-table-column> -->
          <!-- <el-table-column prop="pack" label="最小包装量" align="center"></el-table-column> -->
          <!-- <el-table-column prop="packStard" label="包装方式" align="center"></el-table-column> -->
          <!-- <el-table-column prop="specsBook" label="规格书" align="center"> -->
          <!-- <template slot-scope="scope"> -->
          <!-- <el-link :href="scope.row.specsBook" target="_blank" type="primary">规格书</el-link> -->
          <!-- </template> -->
          <!-- </el-table-column> -->
          <!-- <el-table-column prop="price" label="物料单价(人民币/含税)" align="center"></el-table-column> -->
          <!-- <el-table-column prop="stock" label="库存" align="center"></el-table-column> -->
          <!-- <el-table-column prop="productArea" label="原产地" align="center"></el-table-column> -->
          <el-table-column label="操作"
                           align="center"
                           fixed="right"
                           width="300">
            <template slot-scope="scope">
              <el-row>
                <el-button type="primary"
                           size="mini"
                           @click="modifyInfo(scope.row)"
                           icon="el-icon-edit"></el-button>
                <el-button type="primary"
                           size="mini"
                           @click="checkDetail(scope.row)">物料详情</el-button>
                <el-button type="primary"
                           size="mini"
                           @click="getDetail(scope.row)">料号详情</el-button>
              </el-row>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination style="text-align:center;margin-top:20px"
                       @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"
                       :current-page="currentPage"
                       :page-sizes="[5, 10, 15, 20]"
                       :page-size="pageSize"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="total"></el-pagination>
      </div>
    </el-card>
    <el-dialog title="新增物料" :visible.sync="dialogProductFormVisible" width="80%" >
      <el-form ref="infoForm"
               :model="infoForm"
               label-position="left"
               class="infos flex">
        <el-form-item label="物料号"
                      prop="produceName"
                      style="width:40%"
                      v-show="this.modify==0">
          <el-input v-model="productForm.liaohaoName"
                    placeholder="请输入物料号"
                    :disabled='isDisabled'></el-input>
        </el-form-item>
        <el-form-item label="AKS料号"
                      prop="produceName"
                      style="width:40%"
                      v-show="this.modify==0">
          <el-input v-model="productForm.liaohaoName"
                    placeholder="请输入AKS料号"
                    :disabled='isDisabled'></el-input>
        </el-form-item>
        <el-form-item label="制造商"
                      prop="manufacturer"
                      style="width:40%"
                      >
              <el-select v-model="value"
                  placeholder="请选择">
              <el-option v-for="item in infoForm.AllSlist"
                    :key='item.id'
                    :label="item.menuName"
                    :value="item.id"
                    @click.native="searchUser(item.id)"></el-option>
              </el-select>
        </el-form-item>
        <el-form-item label="产品描述"
                      prop="produceName"
                      style="width:40%"
                      v-show="this.modify==0">
          <el-input v-model="productForm.liaohaoName"
                    placeholder="请输入产品描述"
                    :disabled='isDisabled'></el-input>
        </el-form-item>
        <el-form-item label="对无铅要求的达标情况"
                      prop="produceName"
                      style="width:40%"
                      v-show="this.modify==0">
          <el-input v-model="productForm.liaohaoName"
                    placeholder="请输入对无铅要求的达标情况"
                    :disabled='isDisabled'></el-input>
        </el-form-item>
        <el-form-item label="湿气敏感性等级（MSL）"
                      prop="produceName"
                      style="width:40%"
                      v-show="this.modify==0">
          <el-input v-model="productForm.liaohaoName"
                    placeholder="请输入湿气敏感性等级（MSL）"
                    :disabled='isDisabled'></el-input>
        </el-form-item>
        <el-form-item label="原厂标准交货期"
                      prop="jiaohuoDate"
                      style="width:40%"
                      v-show="this.modify==0">
          <el-date-picker v-model="productForm.timeRange"
                          clearable
                          type="date"
                          placeholder="请输入原厂标准交货期"></el-date-picker>
        </el-form-item>
         <el-form-item label="详情描述"
                      prop="produceName"
                      style="width:40%"
                      v-show="this.modify==0">
          <el-input v-model="productForm.liaohaoName"
                    placeholder="请输入详情描述"
                    :disabled='isDisabled'></el-input>
        </el-form-item>
        <el-form-item label="详情描述"
                      prop="produceName"
                      style="width:40%"
                      v-show="this.modify==0">
          <el-input v-model="productForm.liaohaoName"
                    placeholder="请输入详情描述"
                    :disabled='isDisabled'></el-input>
        </el-form-item>
         <el-form-item label="数据列表"
                      prop="produceName"
                      style="width:40%"
                      v-show="this.modify==0">
          <el-input v-model="productForm.liaohaoName"
                    placeholder="请输入数据列表"
                    :disabled='isDisabled'></el-input>
        </el-form-item>
        <el-form-item label="包装"
                      prop="produceName"
                      style="width:40%"
                      v-show="this.modify==0">
          <el-input v-model="productForm.liaohaoName"
                    placeholder="请输入包装"
                    :disabled='isDisabled'></el-input>
        </el-form-item>
        <el-form-item label="零件状态"
                      prop="produceName"
                      style="width:40%"
                      v-show="this.modify==0">
          <el-input v-model="productForm.liaohaoName"
                    placeholder="请输入零件状态"
                    :disabled='isDisabled'></el-input>
        </el-form-item>
        <el-form-item label="产品族"
                      prop="manufacturer"
                      style="width:40%;">
                      <el-select v-model="value"
                  placeholder="请选择">
              <el-option v-for="item in infoForm.AllSlist"
                    :key='item.id'
                    :label="item.menuName"
                    :value="item.id"
                    @click.native="searchUser(item.id)"></el-option>
              </el-select>
        </el-form-item>
        <el-form-item label="系列"
                      prop="manufacturer"
                      style="width:40%;">
                      <el-select v-model="value"
                  placeholder="系列">
              <el-option v-for="item in infoForm.AllSlist"
                    :key='item.id'
                    :label="item.menuName"
                    :value="item.id"
                    @click.native="searchUser(item.id)"></el-option>
              </el-select>
        </el-form-item>
        <el-form-item label="样品图片"
                      prop="image"
                      style="width:40%">
          <el-upload class="avatar-uploader"
                     :show-file-list="false"
                     :multiple="false"
                     :before-upload="beforeUpload"
                     :http-request="httpRequest"
                     action
                     list-type="picture-card">
            <!-- 缩略图 -->
            <div v-if="infoForm.image"
                 style="height:100%">
              <el-image :src="infoForm.image"
                        fit="cover"
                        style="width: 100%; height: 100%"></el-image>
            </div>
            <i v-else
               class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogProductFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogProductFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="导出筛选" :visible.sync="dialogDetailFormVisible">
            <el-form :model="downLoadForm">
              <el-form-item label="供应商">
                <el-select v-model="value"
                    placeholder="请选择">
                <el-option v-for="item in downLoadForm.AllSlist"
                      :key='item.id'
                      :label="item.menuName"
                      :value="item.id"
                      @click.native="searchUser(item.id)"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="料号关键字"
                      prop="productCode">
                <el-input v-model="downLoadForm.productCode"
                          placeholder="请输入物料编号"
                          :disabled="modify!=0"></el-input>
              </el-form-item>
              <el-form-item label="是否上架"
                      prop="producer">
                <el-switch
                  v-model="downLoadForm.isShow"
                  active-text="未上架"
                  inactive-text="上架" >
                </el-switch>
                <el-form-item label="产品族系"
                      prop="productZu">
                  <el-select v-model="value"
                    placeholder="请选择">
                    <el-option v-for="item in downLoadForm.cateId"
                          :key='item.id'
                          :label="item.menuName"
                          :value="item.id"
                          @click.native="searchUser(item.id)"></el-option>
                  </el-select>
                  </el-form-item>
                <el-form-item label="系列"
                              prop="partXl">
                  <el-select v-model="value"
                    placeholder="请选择">
                    <el-option v-for="item in downLoadForm.partXl"
                          :key='item.id'
                          :label="item.menuName"
                          :value="item.id"
                          @click.native="searchUser(item.id)"></el-option>
                  </el-select>
                </el-form-item>
        </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogDetailFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogDetailFormVisible = false">确 定</el-button>
          </div>
        </el-dialog>
  </div>
</template>

<script>
import { export2Excel } from "@/utils/utils"
import axios from 'axios'
import { PRODUCT_LIST, PRODUCT_ADD, PRODUCT_UPDATE,PRODUCT_BATCHDELETE, SUPPLIER_ALLLIST,
 PRODUCT_DOWNLOAD,PRODUCT_IMAGE_FILE} from "@/utils/api";
import { Message } from "element-ui";

export default {
  data () {
    return {
      columns: [{ title: "id", key: "id" }, { title: "aks料号", key: "aks" }, { title: "制造商编号", key: "product_num" }, { title: "制造商", key: "product_name" }],
      dialogTableVisible: false,
      dialogDetailFormVisible:false,
      name: "",
      modify: 0,
      isDisabled: false,
      // 上传
      updateForm: { imageUrl: '', pdfUrl: '' },
      file: null,
      loadings: '',
      hiddenFile: null,
      downLoadForm:{
         AllSlist: [{"id":1,"menuName":"傲然"},
                  {"id":2,"menuName":"咩咩"},
                  {"id":3,"menuName":"mc"},
                  {"id":4,"menuName":"lulu"}],
        productCode:'',
        isShow:false,
        cateId:[{"id":1,"menuName":"傲然"},
                  {"id":2,"menuName":"咩咩"},
                  {"id":3,"menuName":"mc"},
                  {"id":4,"menuName":"lulu"}],
        partXl:[{"id":1,"menuName":"傲然"},
                  {"id":2,"menuName":"咩咩"},
                  {"id":3,"menuName":"mc"},
                  {"id":4,"menuName":"lulu"}]
      },
      options1: [
        {          id: 1,
          name: "供应商1"
        }, {          id: 2,
          name: "供应商2"
        }, {          id: 3,
          name: "供应商3"
        }, {          id: 4,
          name: "供应商4"
        },
      ],
      gridData: [
        { id: "1", aks: "7887544", product_num: "DSC20456-4K87JT4", product_name: "供应商x" },
        { id: "2", aks: "45ashj1", product_num: "DSC20456-asdaJT4", product_name: "供应商x" },
        { id: "3", aks: "1343sf1", product_num: "DSC20456-4dfffa1", product_name: "供应商x" },
        { id: "4", aks: "5081123", product_num: "DSC20456-asdas1s", product_name: "供应商x" },
        { id: "5", aks: "fdsf312", product_num: "DSC20456-4fffe1s", product_name: "供应商x" },
      ],
      showExport: false,

      formLabelWidth: '120px',
      dialogFormVisible: false,
      dialogProductFormVisible: false,
      productForm: {
        // liaohaoName:'',
        // price:'',
        // productNum:'',
        // stock:'',
        // isShow:1,
        //  attrName:'',
        //  attrVal:'',
      },
      infoForm: {
        // id:0,
        // cateId:'',
        // productCode:'',
        // storeName:'',
        // manufacturer:'',
        // standard:'',
        // level:'',
        // endData:'',
        // description:'',
        // dataList:'',
        // packStard:'',
        // pack:'',
        // partStatus:'',
        // partClass:'',
        // productZu:'',
        // partXl:'',
        // manufacturerCode,
        image:'',
        AllSlist: [{"id":1,"menuName":"傲然"},
                  {"id":2,"menuName":"咩咩"},
                  {"id":3,"menuName":"mc"},
                  {"id":4,"menuName":"lulu"}]
      },
      tableData: [
        // {
        //   id:0,
        //   image: "",
        //   manufacturerCode: "12312",
        //   manufacturer: "2335451",
        //   storeInfo: "BMW",
        //   pack: "sfds423g23g",
        //   specsBook: "10",
        //   stock: "吸塑",
        //   pricestocks: "xxx",
        //   productArea: "100",
        // }
      ],
      currentPage: 1,
      pageSize: 10,
      total: 50,
      AllSlist: [],
      downloadUrl:"https://yzbban.oss-cn-shanghai.aliyuncs.com/",
      value: ''
    };
  },
  mounted () {
    this.getAllList();
    this.getPoductList();
  },
  methods: {
    // 上传前-拦截上传格式
    beforeUpload (file) {
      console.log('==file==>' + file)
      this.infoForm.image = ''
      this.hiddenFile = file
    },
     httpRequest () {
      console.log('==httpRequest==>' + this.hiddenFile)
      // this.loadings = this.$pageLoading.service({
      //   lock: true,
      //   text: '正在上传中,请耐心等待',
      //   spinner: 'el-icon-loading'
      // })
      let param = new FormData()  // 创建form对象
      param.append('image', this.hiddenFile)
      let config = {
        headers: { 'Content-Type': 'multipart/form-data' }
      }
      var that = this
      axios.post('http://fox.foxcore.cn/api/v1/file/image/product', param, config)
        .then(response => {
          if (response.data.status === 200) {
            this.imageUrl = response.data.data
            this.infoForm.image = 'http://oss.dataos.top/' + response.data.data
            this.$message.success('上传图片成功')

          }
          console.log(response.data)
        })
    },
    getAllList () {
      SUPPLIER_ALLLIST().then(res => {
        this.AllSlist = res.data
        console.log(this.AllSlist)
      })
    },
    export2excel () {
      export2Excel(this.columns, this.tableData)
    },
    exportSubmit () {
      this.showExport = !this.showExport
      let that = this
      // 这里请求数据
      PRODUCT_DOWNLOAD({
        menuName: this.value,
      }).then(res => {
        console.log(res.data)
        var url = that.downloadUrl + res.data
        location.href = url
      })
      // this.dialogTableVisible=!this.dialogTableVisible
    },
    exportCancel () {
      this.showExport = !this.showExport
    },
    exportInfo () {
      this.showExport = !this.showExport
    },
    delInfo () {
      if (this.$refs.multipleTable.selection.length == 0) {
        Message({ message: "请先勾选要修改的项目", type: "warning", duration: 2000 })
      } else {
        var deleteList = this.$refs.multipleTable.selection
        var idlist = []
        for (let i in deleteList) {
          idlist.push(deleteList[i].id)
        }
        PRODUCT_BATCHDELETE({
          idlList: idlist
        }).then(res => {
          if (res.status == 200) {
            Message({ message: `${idlist}号料号已删除`, type: "success", duration: 2000 })
            this.getPoductList()
          }
        })

      }
    },
    addInfo () {
      this.$router.push({
        path: "addProduct",

      });
    },
    getPoductList () {
      PRODUCT_LIST({
        pageNo: this.currentPage,
        pageSize: this.pageSize
      }).then(res => {
        console.log(res);
        this.tableData = res.data.dataList;
        this.total = res.data.count;
      });
    },
    checkDetail (row) {
      this.$router.push({
        path: "addProduct",
        query: {
          data: row,
          handler: 'check',
          detail: 'ok'
        }
      });
    },
    getDetail (row) {
      this.$router.push({
        path: "liaohao",
        query: {
          id: row.id
        }
      });
    },
    modifyInfo (row) {
      this.$router.push({
        path: "addProduct",
        query: {
          data: row,
          handler: 'edit',
          detail: 'not'
        }
      });
    },
    handleSelectionChange (val) {
      console.log(val, "handleSelectionChange")
      this.multipleSelection = val;
    },
    handleSizeChange (val) {
      this.pageSize = val
      this.getPoductList();
    },
    handleCurrentChange (val) {
      this.currentPage = val
      this.getPoductList();
    }
  }
};
</script>

<style lang="scss" scoped>
p {
  font-size: 20px;
  padding: 10px 0;
}

.infos {
  width: 100%;
  justify-content: space-between;
  flex-wrap: wrap;
  .item {
    width: 30%;
  }
}
.tableBox {
  width: 100%;
  background: #fff;
  padding: 10px 2px;
  border-radius: 5px;
  //   box-shadow: 2px 3px 15px 0 #ccc;
}
.alerts {
  z-index: 2001;
  position: fixed;
  top: 20%;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
}
.alertDiv {
  display: inline-block;
  width: 900px;
  vertical-align: middle;
  background-color: #fff;
  border-radius: 4px;
  border: 1px solid #ebeef5;
  font-size: 16px;
  -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  text-align: left;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.alertDd {
  width: 80%;
  margin: 6% auto;
  color: #606266;
}
.buttomF {
  margin-right: 31%;
  margin-top: 1%;
  padding-bottom: 2%;
  float: right;
}
.alertBg {
  z-index: 2000;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0.5;
  background: #000;
}
</style>